<template>
  <div class="box">
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      我的消费记录
    </div>
    <!-- 查询 -->
    <div class="consume_input">
      <input type="" class="iconfont" :placeholder="icon"/>
    </div>
    <!--  -->
    <div class="centent">
      <!-- 标题卡 -->
      <div v-for="(item,index) in dataList" :key="index">
        <div class="title_card">
          <div>支出: ${{ item.pay }} 收入: ${{ item.income }}</div>
          <el-date-picker
            v-model="item.time"
            class="title_card_back"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </div>
        <div class="card_back" v-for="(info,subIndex) in item.list" :key="subIndex">
          <div>
            <img src="../../../../assets/static/Consumption/q1.png" alt="">
            <div>
              <div>{{ info.name }}</div>
              <div>{{ info.time }}</div>
              <!--              <div>{{ checkTime(item.create_time) }}</div>-->
            </div>
          </div>
          <div>{{ info.pay }}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {index} from '@/api/merbership/recharge'

export default {
  data() {
    return {
      icon: '\ue630 请输入标题',
      dataList: [{
        time: '2021-10', // 年份+月份
        income: '2222', // 收入
        pay: '1111', // 支出
        list: [{ // 本月消费记录
          name: '给***转账', // 本次消费名
          time: '10-11 15:00:00', // 消费时间
          pay: '+300' // 支出/收入
        }, {
          name: '给***转账', // 本次消费名
          time: '10-11 17:00:00', // 消费时间
          pay: '-300' // 支出/收入
        },]
      },{
        time: '2021-11', // 年份+月份
        income: '2212', // 收入
        pay: '1111', // 支出
        list: [{ // 本月消费记录
          name: '给***转账', // 本次消费名
          time: '11-11 15:00:00', // 消费时间
          pay: '+300' // 支出/收入
        }, {
          name: '给***转账', // 本次消费名
          time: '11-11 17:00:00', // 消费时间
          pay: '-300' // 支出/收入
        },]
      }]
    }
  },
  mounted() {
    // this.index()
  },
  methods: {
    /**
     * 时间戳判断
     * @param timeStamp
     * @returns {string}
     */
    checkTime(timeStamp) {
      let timeStr = new Date(timeStamp)
      return timeStr.toLocaleTimeString()
    },
    // -------------- axios -----------------
    /**
     * 我的消费记录
     */
    index() {
      const pd = {}
      index(this.$qs.stringify(pd))
        .then(res => {
          this.dataList = res.data.data.data
        })
    }
  }
}
</script>

<style scoped>
.box {
  background-color: #F5F5F5;
}

/* 标题 */
.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/*  */
.consume_input {
  margin: 15px;
}

.consume_input input {
  box-shadow: 0 0 5px #ccc;
  width: 98%;
  text-align: center;
  outline: none;
  border: none;
  height: 40px;
  border-radius: 10px;
}

.consume_input input::-webkit-input-placeholder {
  color: #67C41D;
}

/*  */
.centent {
  margin: 15px;
}

/* 标题卡 */
.title_card {
  background-color: rgba(193, 225, 169, 0.5);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #64BE1D;
  border-radius: 10px;
}

.title_card_back {
  width: 120px;
  background-color: #fff;
  /*padding: 8px;*/
  border-radius: 8px;
}

.title_card_back .el-icon-arrow-down {
  margin-left: 3px;
}

/*  */
.card_back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
  color: #63BD1F;
  font-size: 18px;
  font-weight: bold;
}

.card_back img {
  width: 45px;
  margin-right: 10px;
  margin-top: 5px;
}

.card_back > div:nth-child(1) {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #999999;
  font-weight: normal;
}

.card_back > div:nth-child(1) > div > div:nth-child(1) {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #333333;
}
</style>
